<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		.main {
			width: 1030px;
			height: 470px;
		}

		#right {
			width: 530px;
			height: 470px;
			float: right;
		}

		.right1 {
			width: 260px;
			height: 470px;
			float: left;
		}

		.right2 {
			width: 260px;
			height: 470px;
			float: left;
		}

		.rightimg {
			width: 270px;
			height: 200px;
		}

		.rightbutton {
			text-align: center;
		}
	</style>

	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
		  integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	<script type="text/javascript" src="vue.js"></script>
	<!-- 引入样式 -->
	<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
	<!-- 引入组件库 -->
	<script src="https://unpkg.com/element-ui/lib/index.js"></script>

</head>
<body>
<div id="app">
	<div class="main">
		<div id="right">
			<div class="right1">
				<form id="bar1" enctype="multipart/form-data">
					<div class="rightimg">
						<p>店铺封面：</p>
						<img src="" style="width: 150px;height: 150px;" id="haha1" />
						<input name="pic1" type="file" id="pic1" />
					</div>
				</form>
				<button type="button" class="btn btn-success" id="submintInfo1">上传</button>
				<form id="bar2" enctype="multipart/form-data">
					<div class="rightimg">
						<p>营业执照：</p>
						<img src="" style="width: 150px;height: 150px;" id="haha2" />
						<input name="pic2" type="file" id="pic2" />
					</div>
				</form>
				<button type="button" class="btn btn-success" id="submintInfo2">上传</button>
			</div>
			<!--right1-->

			<div class="right2">
				<form id="bar3" enctype="multipart/form-data">
					<div class="rightimg">
						<p>身份证正面：</p>
						<img src="" style="width: 150px;height: 150px;" id="haha3" />
						<input name="pic3" type="file" id="pic3" />
					</div>
				</form>
				<button type="button" class="btn btn-success" id="submintInfo3">上传</button>
				<form id="bar4" enctype="multipart/form-data">
					<div class="rightimg">
						<p>身份证反面：</p>
						<img src="" style="width: 150px;height: 150px;" id="haha4" />
						<input name="pic4" type="file" id="pic4" />
					</div>
				</form>
				<button type="button" class="btn btn-success" id="submintInfo4">上传</button>
			</div><!--right2-->
		</div><!--right-->
	</div><!--main-->
	<!--<div class="rightbutton">-->
		<!--<button type="button" class="btn btn-primary" id="gobackOne">返回</button>-->
	<!--</div>-->
</div><!--app-->

<script type="text/javascript">
	var app=new Vue({
		el:"#app",
		data:{
			pan:'3'
		},
		methods:{}
	});

	pic1.onchange = function() {
		var r1 = new FileReader();
		r1.readAsDataURL(pic1.files[0]);
		r1.onload = function() {
			haha1.src = r1.result;
			isPicFile(pic1.value);
		}
	};

	submintInfo1.onclick = function() {
		if(app.pan==0){
		var picData1 = new FormData(bar1);
		$.ajax({
			url: "/cai/businessRegister/addPic1",
			type: "POST",
			data: picData1,
			processData: false,
			contentType: false,
			success: function(data) {}
		});
		}
		else{
			app.$notify.error({
				title: '错误',
				message: '图片类型不匹配'
			});
		}
	};

	pic2.onchange = function() {
		var r2 = new FileReader();
		r2.readAsDataURL(pic2.files[0]);
		r2.onload = function() {
			haha2.src = r2.result;
			isPicFile(pic2.value);
		}
	};

	submintInfo2.onclick = function() {
		if(app.pan==0) {
			var picData2 = new FormData(bar2);
			$.ajax({
				url: "/cai/businessRegister/addPic2",
				type: "POST",
				data: picData2,
				processData: false,
				contentType: false,
				success: function (data) {
				}
			});
		}
		else{
			app.$notify.error({
				title: '错误',
				message: '图片类型不匹配'
			});
		}
	};

	pic3.onchange = function() {
		var r3 = new FileReader();
		r3.readAsDataURL(pic3.files[0]);
		r3.onload = function() {
			haha3.src = r3.result;
			isPicFile(pic3.value);
		}
	};

	submintInfo3.onclick = function() {
		if(app.pan==0) {
			var picData3 = new FormData(bar3);
			$.ajax({
				url: "/cai/businessRegister/addPic3",
				type: "POST",
				data: picData3,
				processData: false,
				contentType: false,
				success: function (data) {
				}
			});
		}
		else{
			app.$notify.error({
				title: '错误',
				message: '图片类型不匹配'
			});
		}
	};

	pic4.onchange = function() {
		var r4 = new FileReader();
		r4.readAsDataURL(pic4.files[0]);
		r4.onload = function() {
			haha4.src = r4.result;
			isPicFile(pic4.value);
		}
	};

	submintInfo4.onclick = function() {
		if(app.pan==0) {
			var picData4 = new FormData(bar4);
			$.ajax({
				url: "/cai/businessRegister/addPic4",
				type: "POST",
				data: picData4,
				processData: false,
				contentType: false,
				success: function (data) {
				}
			});
		}
		else{
			app.$notify.error({
				title: '错误',
				message: '图片类型不匹配'
			});
		}
	};


	gobackOne.onclick=function(){
		window.location.href="/cai/businessIntoOne.html";
	};
	function isPicFile(fileName) {
		//lastIndexOf如果没有搜索到则返回为 -1
		if (fileName.lastIndexOf(".") != -1) {
			var fileType = (fileName.substring(fileName.lastIndexOf(".") + 1, fileName.length)).toLowerCase();
			var suppotFile = new Array();
			suppotFile[0] = "jpg";
			suppotFile[1] = "gif";
			suppotFile[2] = "bmp";
			suppotFile[3] = "png";
			suppotFile[4] = "jpeg";
			suppotFile[5] = "jfif";
			suppotFile[6] = "webp";
			for ( var i = 0; i < suppotFile.length; i++) {
				app.pan=0;
				if (suppotFile[i] == fileType) {
					return true;
				} else {
					continue;
				}
			}
			app.pan=1;
			alert("文件类型不合法,只能是jpg、gif、bmp、png、jpeg、png、jfif、webp类型！");
			return false;
		} else {
			app.pan=2;
			alert("文件类型不合法,只能是 jpg、gif、bmp、png、jpeg、png、jfif、webp类型！");
			return false;
		}
	}




</script>
</body>
</html>
